<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="HandheldFriendly" content="true">
		<title>金期权-恒指期权</title>
		<link rel="stylesheet" type="text/css" href="__OCSS__/reset.css"/>
		<link rel="stylesheet" type="text/css" href="__OCSS__/style.css"/>
		<link rel="stylesheet" type="text/css" href="__OCSS__/trend.css"/>
		<link rel="stylesheet" type="text/css" href="__CSS__/svg.css"/>
		<script type="text/javascript" src="__OJS__/jquery-1.8.2.js"></script>
		<script type="text/javascript" src="__OJS__/avalon.js"></script>
	</head>
	<body ms-controller="conter">
		
<div class="qh-container">
<div class="pub-box">
				
<div class="header-box clearfix" ms-visible="pubtab === 0">
	<div class="header-left"><a href="#"><img src="__OIMG__/icon-10.png" width="100%"/></a></div>
		<div class="header-right">
			<a href="{:U('StockOption/rules')}">交易规则</a>
		</div>
		<div class="header-slide">
			<div class="slide-up">
				 <a class="slide_arrow" ms-click="type"><span>价差期权</span><i class="icon icon_close"></i></a>
			</div>
			<div class="slide-down" ms-visible="typenode">
				<ul>
					<li><a href="{:U('Index/index')}">价差期权</a></li>
					<li><a href="{:U('StockOption/now')}">恒生期权</a></li>
				</ul>
			</div>
		</div>
</div><!--header-box-->
				
<div class="pub-content" ms-controller="public" ms-visible="pubtab === 0">
		<div class="pub-park">
			<span>余额<span class="pub-yuen">{$money}</span></span><span class="ml30">持仓盈亏 <font class="pub-redcolor funding">{{ProfitAndLoss}}元</font></span>
		</div><!--余额，盈亏-->
					
		<div class="pub-tab-menu clearfix">
			<ul>
				<li ms-click="toggle(0)" ms-class-="pub-cur:showtoggle == 0"><a href="#">下单</a></li>
				<li ms-click="toggle(1)" ms-class-="pub-cur:showtoggle == 1"><a href="#">持仓</a></li>
				<li ms-click="toggle(2)" ms-class-="pub-cur:showtoggle == 2"><a href="#">结算</a></li>
			</ul>
		</div>		
</div><!--公共部分-->


<div class="pub-tab-content" ms-visible="pubtab === 0">
<!--下单-->
<div class="pub-order-list" ms-visible="currentIndex === 0" ms-controller="order">
	<!--显示值-->
	<div class="order-list-gro clearfix">
		<dl class="stock-data clearfix">
			<dd class="stock-title">恒生期权</dd>
			<dd class="stock-fund pub-redcolor">{{countindex}}元</dd>
			<dd class="stock-pool">
				<div class="plus pub-redcolor">{{up}}</div>
				<div class="minus pub-redcolor">{{ups}}%</div>
			</dd>
		</dl>
		<div class="stock-sale clearfix">
			<span class="text-left">卖价  &nbsp;&nbsp;&nbsp;  <em class="offer" ms-class="{{sell}}">{{sell_price}}元</em></span>
			<span class="text-right">买价  &nbsp;&nbsp;&nbsp;  <em class="buying" ms-class="{{buy}}">{{buy_price}}元</em></span>
		</div>
	</div>
	
	<!-- 分时曲线图 -->
	<div class="trend-chart" style="padding-bottom: 65px;">
        <svg id="svgbox" class="svgbox" version="1.1" xmlns="http://www.w3.org/2000/svg">
        	<g>
        		<text x="5" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>17:00</tspan></text>
        		<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>9:00</tspan></text>
        		<text x="116" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>13:00</tspan></text>
        		<text x="10" y="453.6" fill="#888" style="text-anchor: start;font-size:8pt"><tspan>16:15</tspan></text>
        		<text x="116" y="155" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>2153.00</tspan></text>
        		<text x="116" y="155" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>+1.48%</tspan></text>

        		<!--<text x="10" y="290" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>21147</tspan></text>
        		<text x="10" y="362" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>21082</tspan></text>
        		<text x="10" y="435" fill="#d0402d" style="text-anchor: start;font-size:8pt"><tspan>21032</tspan></text>-->
        		<line x1='' y1='' x2='' y2='' stroke="red" stroke-dasharray="3,3"></line>
        	</g>
        	<g>
        		<path stroke="none" fill="#3083ca" fill-opacity="0.2" d="M 0,140 L150,140Z"></path><!--线-->
        		<path stroke="#3083ca" fill="none" d="M 0,140 L150,140Z"></path><!--图-->
        	</g>
        	<g>
        		
        	</g>
        </svg>
	</div>
	
	<!--看涨看跌按钮-->
	<div class="order-action">
		<span class="action-left" ms-click="sut(0)" data-val="1"><a  class="btn-left " >看涨</a></span>
		<span class="action-right" ms-click="sut(1)" data-val="0"><a  class="btn-right " >看跌</a></span>
	</div>
	
</div>

<!--持仓-->
<div class="pub-order-list" ms-visible="currentIndex === 1" ms-controller="hasheld" id="hasheld">
	<div class="order-list-gro clearfix order-lists" ms-repeat="hasarr">
		<p class="pub-title">
			<span class="title-name">{{el.name}}</span>
			<span class="title-date">
				<span>{{el.timestar}}</span>
			</span>
		</p>
		<div class="order-square clearfix">
			<dl>
				<dd>
					<div class="square-info">
						<p class="order-direction">{{el.direction}}</p>
						<p>金额<span>{{el.investment}}</span>元</p>
						<p>收益<span>{{el.profitx}}</span>%</p>
						<p>剩余
							<div class="elapsed">{{el.dirtime}}</div>
						</p>
					</div>
				</dd>
				<dd>
					<div class="square-profit">
						<p>盈亏
							<span class="order-profit">{{el.profit}}</span>
							元
						</p>
						<p>执行价<span>{{el.buyprice}}</span></p>
						<p>当前价<span>{{currnow}}</span></p>
							<div class="percent">
								<div class="pbar" ms-css-width={{el.pic}}></div>
								<b></b>
							</div>
					</div>
				</dd>
				<dd>
					<a href="#" class="square-btn-doing">进行中</a>
				</dd>
			</dl>
		</div>
	</div>
</div>


<!--结算成功-->
<div class="pub-order-list" ms-visible="currentIndex === 2">
	<div data-page="1" ms-controller="settlement">
<!---->
<div class="order-list-gro clearfix " ms-repeat="setarr">
	<p class="pub-title">
		<span class="title-name">{{el.name}}</span><span class="title-date" >开仓{{el.timestar}}</span></p>
	<div class="order-square clearfix">
		<dl>
			<dd>
				<div class="square-info">
					<p>{{el.direction}}</p>
					<p>{{el.investment}}元</p>
					<p>收益{{el.profitx}}%  </p>
					<p>时长{{el.timelenght}}秒  </p>
				</div>
			</dd>
			<dd>
				<div class="square-profit">
					<p >盈亏{{el.profit}}元</p>
					<p>执行价{{el.buyprice}}</p>
					<p>到期价{{el.sellprice}}</p>
					<p>到期时间{{el.timeover}}</p>
				</div>
			</dd>
			<dd>
				<a href="#" class="square-btn">结算成功</a>
			</dd>
		</dl>
	</div>
</div>
<!---->
	</div>
	<a class="jiesuanas">加载更多...</a>
</div>




</div><!--pub-tab-content-->


<!--弹出-->
<div id="see-up" ms-controller="order" ms-visible="see === 0">
	<!--头部-->
	<div class="header-box clearfix">
		<div class="header-left"><a href="#" ms-click="seehide"><img src="__OIMG__/icon-10.png" width="100%"/></a></div>
		<div class="header-slide">
			下单
		</div>
	</div>
	<!--选择项-->
	<ul class="main-list" style="padding-top: 50px;">
		<li>
			<div class="up-title"><!--恒生期权-HSI1603-->{{xoption}}期权</div>
		</li>
		<li>
			<div class="up-title clearfix">
				<div class="list-left">到期时间</div>
				<div class="list-right timeshow">
					<span class="list-second list-checked" ms-click="timeshow(0)">60秒</span>
					<span class="list-second" ms-click="timeshow(1)">300秒</span>
					<span class="list-second" ms-click="timeshow(2)">900秒</span>
					<span class="list-second" ms-click="timeshow(3)" style="display: none;">1800秒</span>
					<span class="list-second" ms-click="timeshow(4)" style="display: none;">3600秒</span>
					<a class="right-select" ms-click="timelistshow"><img src="__OIMG__/icon-02.png" width="100%"/></a>
					<div class="dialog-right" ms-visible="timelist === 0">
						<div class="dialog-content">
							<ul class="timeclick">
								<li ms-click="timeshow(0)">60秒</li>
								<li ms-click="timeshow(1)">300秒</li>
								<li ms-click="timeshow(2)">900秒</li>
								<li ms-click="timeshow(3)">1800秒</li>
								<li ms-click="timeshow(4)">3600秒</li>
							</ul>
						</div>
					</div>
					
				</div>
			</div>
		</li>
		<li>	
			<div class="up-title">
				<div class="list-left">潜在收益率 <span class="pub-orangecolor" id="earn-rate">{{YieldsAvailable}}%</span></div>
				<div class="list-right">
					潜在收益&nbsp;&nbsp;&nbsp;<span class="pub-orangecolor" id="earn">{{Yields}}元</span>
				</div>
			</div>
		</li>
		<li>
			<div class="up-title clearfix">
				<div class="list-left">投资金额</div>
				<div class="list-right2 monyshow">
					<span class="list-second" ms-click="monyshow(0)" style="display: none;">10元</span>
					<span class="list-second" ms-click="monyshow(1)" style="display: none;">50元</span>
					<span class="list-second list-checked" ms-click="monyshow(2)">100元</span>
					<span class="list-second" ms-click="monyshow(3)" >200元</span>
					<span class="list-second" ms-click="monyshow(4)" >500元</span>
					<span class="list-second" ms-click="monyshow(5)" style="display: none;">1000元</span>
					<span class="list-second" ms-click="monyshow(6)" style="display: none;">2000元</span>
					<span class="list-second" ms-click="monyshow(7)" style="display: none;">5000元</span>
					<a class="right-select2" ms-click="monylistshow"><img src="__OIMG__/icon-02.png" width="100%"/></a>
					<div class="dialog-right2" ms-visible="monylist === 0">
						<div class="dialog-content">
							<ul class="monyclick">
								<li ms-click="monyshow(0)">10元</li>
								<li ms-click="monyshow(1)">50元</li>
								<li ms-click="monyshow(2)">100元</li>
								<li ms-click="monyshow(3)">200元</li>
								<li ms-click="monyshow(4)">500元</li>
								<li ms-click="monyshow(5)">1000元</li>
								<li ms-click="monyshow(6)">2000元</li>
								<li ms-click="monyshow(7)">5000元</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</li>
	</ul>
	<!--当前价-->
	<div class="main-execute">
		<div class="up-title">
			<span class="input-radio">●</span>及时执行（最新执行价<em class="last">{{countindex}}</em>）
		</div>
	</div>
	<!--买-->
	<div class="order-action" data-heyueid="{$option['id']}" data-zhangdie='1' data-heyue="{$option['id']}">
		<span class="action-up"   ms-visible="num === 0" ms-click="buyajax(0)"><a href="#" class="btn-up ">确定看涨</a></span>
		<span class="action-down" ms-visible="num === 1" ms-click="buyajax(1)"><a href="#" class="btn-down ">确定看跌</a></span>
	</div>	
</div>
			


</div><!--pub-box-->
</div><!--min320max640-->


<!--提示成功-->
<div class="showmsgbox" ms-controller="mengseg" ms-visible="dire === 0">
	<div class="showmsg">
		<div class="msg">{{msg}}</div>
		<div class="msgok" ms-click="msgclick">确定</div>
	</div>
</div>
	
</body>
<script type="text/javascript">
var men = avalon.define({
        $id: "mengseg",
    	msg:"执行成功！",
    	dire:1,
    	msgclick:function(){
    		men.dire=1;//关闭显示的弹窗
    		ord.see=1;//关闭下单页面
    		con.currentIndex=1;//显示持仓页面
    		con.pubtab=0;//开启tablist的显示
    		con.showtoggle=1;//开启持仓选中样式
    	}
	})
//余额
var pub = avalon.define({
        $id: "public",
        balance:0.00,
        ProfitAndLoss:0.00,
	})

//全局
var con = avalon.define({
        $id: "conter",
        currentIndex : 0,
        typenode : false,
        pubtab : 0,
        showtoggle: 0,
        toggle: function(index) {
            con.currentIndex = index;
            con.showtoggle=index;
        },
        type:function(){
        	if(con.typenode){
        		con.typenode = false ;
        	}else{
        		con.typenode = true ;
        	}
        }
	})

//恒指获取
//onloads()
function onloads(){
	setInterval(function(){
		var timestamp = Date.parse(new Date());
		var url="{:U('UpdateOption/update_index','','')}";
		url = url+'/_'+timestamp;
		$.ajax({
			type:"post",
			url:url,
			dataType:"json",
			async:true,
			success:function(datas){
				ord.countindex=datas['last_price'];
				ord.sell_price=datas['sell_price'];
				ord.buy_price=datas['buy_price'];
				has.currnow=datas['last_price'];
				if(ord.see==1){
					ord.seebuy=datas['sell_price'];
				}else{
					ord.seebuy=datas['buy_price'];
				};
				if(datas['up']>0){
					ord.sell="pub-redcolor";
					ord.buy="pub-redcolor";
					ord.ups='+'+datas['ups'];
					ord.up='+'+datas['up'];
				}else{
					ord.sell="pub-bluecolor";
					ord.buy="pub-bluecolor";
					ord.ups='-'+datas['ups'];
					ord.up='-'+datas['up'];
				};
			}
		})
		
	},1000)//setInterval
}//onloads

//订单
var ord = avalon.define({
        $id: "order",
        countindex:0,//恒生期权指数
        seebuy:0,
        up:0,//up
        ups:0,//ups
        sell_price:0,//买出价
        buy_price:0,//买入价
        sell:"pub-redcolor",
        buy:"pub-bluecolor",
        num:null,//买张买跌按钮显示隐藏
        see:1,//买张买跌显示隐藏
        xoption:"恒生",//股票名称
        monylist:1,//金额选择列表的现实隐藏
        el:2,//当前选择的金额
        timelist:1,//金额选择列表的现实隐藏
        ex:0,//当前选择的时间
        YieldsAvailable:76,//收益率
        Yields:(10*76/100)+ 10,//收益
        timearr:[76,78,80,82,86],
        timearrtwo:[60,300,900,1800,3600],
        monyarr:[10,50,100,200,500,1000,2000,5000],
        sut:function(num){
        	//买张买跌按钮的显示
        	ord.see=0;//显示下单页面
        	ord.num=num;//显示买涨买跌
        	con.pubtab=1;//关闭tablist的显示
        },
        seehide:function(){
        	//买张买跌页面的显示
        	ord.see=1;
        	con.pubtab=0;
        },
        monylistshow:function(){
        	//选择金额的列表显示
        	ord.monylist=0;
        },
        monyshow:function(elm){
        	//选择金额的动作
        	monylist(elm)
        },
        timelistshow:function(){
        	//选择时间的列表显示
        	ord.timelist=0;
        },
        timeshow:function(elm){
        	//选择时间的动作
        	timelist(elm)
        },
        buyajax:function(el){
        	//下单 0涨 1跌
        	ord.num=2;//关闭下单按钮
        	var data=new Array();
        	data.option_id=$(this).parent().attr('data-heyue');
        	data.direction=el;
        	data.time=ord.timearrtwo[ord.ex];
        	data.invest=ord.timearr[ord.ex];
        	data.yield_rate=ord.monyarr[ord.el];
//      	console.log(data.invest);
        	ordajax(data);
        }
	})
function ordajax(datass){
	//下单
	var url="{:U('StockOption/order_insert')}";
	$.ajax({
		type:"post",
		url:url,
		dataType:"json",
		data:{invest:datass.invest, option_id:datass.option_id ,direction:datass.direction, duration:datass.time, yield_rate:datass.yield_rate},
		async:true,
		success:function(data){
			//显示提示
			men.dire=0;
			hasajax();
			console.log(data);
		}
	})
}

//持仓
var has = avalon.define({
        $id: "hasheld",
        currnow:0,
        hasarr:[
//				{
//          		name: "横生期权1",//期权名
//                  timestar: "2016.03.06",//买入时间
//                  direction: "看涨",//方向
//                  investment: 100,//投入资金
//                  profitx: 86,//收益率
//                  profit: -650,//收益
//                  buyprice: "2073.60",//买入点数
//                  nowprice: "2073.60",//实时点数
//                  timelenght: 3600,//总时长
//                  dirtime:12,//剩余秒数
//					pic:52%,//百分比
//                  complete:true,//true没完成   false完成
//              }
        ]
	})
function hasajax(){
	//加载持仓
	var url="{:U('StockOption/load_ongoing')}";
	$.ajax({
		type:"post",
		url:url,
		dataType:"json",
		async:true,
		success:function(datas){
			has.hasarr=[];
//			console.log(datas[0]);
			for(var i=0;i<datas.length;i++){
				var onedata=new Array();
	        	onedata.name	  =datas[i].option_name;
	        	onedata.timestar  =datas[i].format_start_time;
	        	onedata.direction =datas[i].direction_str;
	        	onedata.investment=datas[i].yield_rate;
	        	onedata.profitx   =datas[i].invest;
				onedata.buyprice  =datas[i].buy_price;
				onedata.nowprice  =datas[i].buy_price;
				onedata.timelenght=datas[i].duration;
				onedata.dirtime   =datas[i].shen;
				onedata.pic		  =(datas[i].duration-datas[i].shen)/datas[i].duration*100+'%';
				onedata.complete  =true;
				has.hasarr.push(onedata);
			}
//			console.log(datas);
			//判断是不是要加载百分比进度条程序
			if(datas.length>0){
				oflw();
			}
		}
	})
}
//hasajax()
//结算
var sets = avalon.define({
        $id: "settlement",
	    setarr:[]
	})
function setajax(){
	//加载结算
	var url="{:U('StockOption/load_over')}";
	$.ajax({
		type:"post",
		url:url,
		dataType:"json",
		async:true,
		success:function(datas){
			sets.setarr=[];
//			console.log(datas[0]);
			for(var i=0;i<datas.length;i++){
				var onedata=new Array();
	        	onedata.name	  =datas[i].option_name;
	        	onedata.timestar  =datas[i].format_start_time;
	        	onedata.direction =datas[i].direction_str;
	        	onedata.investment=datas[i].yield_rate;
	        	onedata.profitx   =datas[i].invest;
	        	onedata.profit	  =datas[i].profit
				onedata.buyprice  =datas[i].buy_price;
				onedata.sellprice  =datas[i].sell_price;
				onedata.timelenght=datas[i].duration;
				onedata.timeover  =datas[i].format_end_time;
				onedata.complete  =true;
				sets.setarr.push(onedata);
			}
//			console.log(datas);
		}
	})
}
//setajax();

var urls="{:U('InsertData/fenshi')}";
</script>
<script src="__OJS__/now.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="__JS__/svg.js"></script>
</html>
